<template>
  <div class="app-container home">
    <el-tabs type="border-card">
      <el-tab-pane v-if="checkPermi(['index:gas:tab'])" label="管道监测设备">
        <el-row :gutter="40" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToGasDevice()">
              <div class="card-panel-icon-wrapper icon-xunjian">
                <svg-icon icon-class="build" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部设备数</div>
                <count-to :start-val="0" :end-val="gasDeviceStat.totalCount" :duration="2600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToGasDevice()">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="example" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">在线设备数</div>
                <count-to :start-val="0" :end-val="gasDeviceStat.totalOnlineCount" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToGasTodayEvent()">
              <div class="card-panel-icon-wrapper icon-bug">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">本日报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalGasEvent.todayCount" :duration="3200" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToGasAllEvent()">
              <div class="card-panel-icon-wrapper icon-dashboard">
                <svg-icon icon-class="dashboard" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalGasEvent.totalCount" :duration="3600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>
                    <i class="el-icon-s-flag" style="color: red"></i>
                    监测报警统计
                  </span>
                </div>
                <div class="body">
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <div>
                          <el-statistic :value="gasEventStatisticsByDate.todayCount" title="本日">
                            <template slot="suffix">
                              <span>
                                <i class="el-icon-star-on" style="color:red"></i>
                              </span>
                            </template>
                          </el-statistic>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="gasEventStatisticsByDate.monthCount" title="本月">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="gasEventStatisticsByDate.yearCount" title="本年">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>
                    <i class="el-icon-s-flag" style="color: red"></i>
                    事件类型分析
                  </span>
                </div>
                <div class="body">
                  <div ref="gasEventAnalyseChartDiv" style="height: 200px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>本日/本月数据分析</span>
                </div>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div ref="gasTodayStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                  <el-col :span="12">
                    <div ref="gasMonthStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>30日内事件趋势</span>
                </div>
                <div class="body">
                  <div ref="gasThirtyDaysTrendChartDiv" style="height: 300px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['index:quake:tab'])" label="环境监测设备">
        <el-row :gutter="40" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-xunjian">
                <svg-icon icon-class="build" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部设备数</div>
                <count-to :start-val="0" :end-val="quakeDeviceStat.totalCount" :duration="2600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="example" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">在线设备数</div>
                <count-to :start-val="0" :end-val="quakeDeviceStat.totalOnlineCount" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToQuakeTodayEvent()">
              <div class="card-panel-icon-wrapper icon-bug">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">本日报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalQuakeEvent.todayCount" :duration="3200" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToQuakeAllEvent()">
              <div class="card-panel-icon-wrapper icon-dashboard">
                <svg-icon icon-class="dashboard" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalQuakeEvent.totalCount" :duration="3600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>
                    <i class="el-icon-s-flag" style="color: red"></i>
                    监测报警统计
                  </span>
                </div>
                <div class="body">
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <div>
                          <el-statistic :value="quakeEventStatisticsByDate.todayCount" title="本日">
                            <template slot="suffix">
                              <span>
                                <i class="el-icon-star-on" style="color:red"></i>
                              </span>
                            </template>
                          </el-statistic>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="quakeEventStatisticsByDate.monthCount" title="本月">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="quakeEventStatisticsByDate.yearCount" title="本年">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix2">
                  <span>
                    <i class="el-icon-s-flag" style="color: red"></i>
                    事件类型分析
                  </span>
                </div>
                <div class="body">
                  <div ref="quakeEventAnalyseChartDiv" style="height: 200px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>本日/本月数据分析</span>
                </div>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div ref="quakeTodayStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                  <el-col :span="12">
                    <div ref="quakeMonthStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>30日内事件趋势</span>
                </div>
                <div class="body">
                  <div ref="quakeThirtyDaysTrendChartDiv" style="height: 300px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['index:beidou:tab'])" label="环境监测（北斗）">

        <el-row :gutter="40" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllDevice()">
              <div class="card-panel-icon-wrapper icon-xunjian">
                <svg-icon icon-class="build" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部设备数</div>
                <count-to :start-val="0" :end-val="beidouDeviceStat.totalCount" :duration="2600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllDevice()">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="example" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">在线设备数</div>
                <count-to :start-val="0" :end-val="beidouDeviceStat.totalOnlineCount" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouTodayEvent()">
              <div class="card-panel-icon-wrapper icon-bug">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">本日报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalBeidouEvent.todayCount" :duration="3200" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllEvent()">
              <div class="card-panel-icon-wrapper icon-dashboard">
                <svg-icon icon-class="dashboard" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalBeidouEvent.totalCount" :duration="3600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag" style="color: red"></i>
              监测报警统计
            </span>
                </div>
                <div class="body">
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <div>
                          <el-statistic :value="beidouEventStatisticsByDate.todayCount" title="本日">
                            <template slot="suffix">
                      <span>
                        <i class="el-icon-star-on" style="color:red"></i>
                      </span>
                            </template>
                          </el-statistic>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="beidouEventStatisticsByDate.monthCount" title="本月">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="beidouEventStatisticsByDate.yearCount" title="本年">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag" style="color: red"></i>
              事件类型分析
            </span>
                </div>
                <div class="body">
                  <div ref="beidouEventAnalyseChartDiv" style="height: 200px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>本日/本月数据分析</span>
                </div>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div ref="beidouTodayStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                  <el-col :span="12">
                    <div ref="beidouMonthStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>30日内事件趋势</span>
                </div>
                <div class="body">
                  <div ref="beidouThirtyDaysTrendChartDiv" style="height: 300px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['index:beidou:tab'])" label="压力切断设备">

        <el-row :gutter="40" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllDevice()">
              <div class="card-panel-icon-wrapper icon-xunjian">
                <svg-icon icon-class="build" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部设备数</div>
                <count-to :start-val="0" :end-val="beidouDeviceStat.totalCount" :duration="2600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllDevice()">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="example" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">在线设备数</div>
                <count-to :start-val="0" :end-val="beidouDeviceStat.totalOnlineCount" :duration="3000" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouTodayEvent()">
              <div class="card-panel-icon-wrapper icon-bug">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">本日报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalBeidouEvent.todayCount" :duration="3200" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToBeidouAllEvent()">
              <div class="card-panel-icon-wrapper icon-dashboard">
                <svg-icon icon-class="dashboard" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">全部报警数</div>
                <count-to :start-val="0" :end-val="statisticsTotalBeidouEvent.totalCount" :duration="3600" class="card-panel-num"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag" style="color: red"></i>
              监测报警统计
            </span>
                </div>
                <div class="body">
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <div>
                          <el-statistic :value="beidouEventStatisticsByDate.todayCount" title="本日">
                            <template slot="suffix">
                      <span>
                        <i class="el-icon-star-on" style="color:red"></i>
                      </span>
                            </template>
                          </el-statistic>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="beidouEventStatisticsByDate.monthCount" title="本月">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card shadow="hover">
                        <el-statistic group-separator="," :value="beidouEventStatisticsByDate.yearCount" title="本年">
                          <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                          </template>
                        </el-statistic>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag" style="color: red"></i>
              事件类型分析
            </span>
                </div>
                <div class="body">
                  <div ref="beidouEventAnalyseChartDiv" style="height: 200px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-row>
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>本日/本月数据分析</span>
                </div>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <div ref="beidouTodayStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                  <el-col :span="12">
                    <div ref="beidouMonthStatisticsChartDiv" style="height: 200px; width: 100%"></div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>
            <el-row style="margin-top: 20px;">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>30日内事件趋势</span>
                </div>
                <div class="body">
                  <div ref="beidouThirtyDaysTrendChartDiv" style="height: 300px; width: 100%"></div>
                </div>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['index:admin:tab'])" label="数据大屏">
        <el-row :gutter="40" class="panel-group">
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToVisual('/visual/quakeDataVisual')">
              <div class="card-panel-icon-wrapper icon-xunjian">
                <svg-icon icon-class="build" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">环境监测大屏</div>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToVisual('/visual/gasDataVisual')">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="example" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">管道监测设备</div>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="card-panel" @click="navToVisual('/visual/gasDataVisual')">
              <div class="card-panel-icon-wrapper icon-bug">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">压力监测设备</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { checkPermi } from '@/utils/permission';
import CountTo from 'vue-count-to'
import auth from '@/plugins/auth'
import { gasDeviceStat, statisticsTotalGasEvent, gasEventStat, todayGasEventStat, monthGasEventStat, thirtyDaysGasEventTrend, gasEventThisYearStatistics } from '@/api/device/gasStatistics'
import { quakeDeviceStat, statisticsTotalQuakeEvent, quakeEventStat, todayQuakeEventStat, monthQuakeEventStat, thirtyDaysQuakeEventTrend, thisYearQuakeEventStatistics } from '@/api/device/quakeStatistics'
import { beidouDeviceStat, beidouTotalEvent, beidouEventStat, beidouTodayEventStat, beidouMonthEventStat, beidouThirtyDaysEventTrend, beidouThisYearEventStatistics } from '@/api/device/beidouStatistics'
import echarts from 'echarts'

export default {
  name: "Index",
  components: {
    CountTo
  },
  data() {
    return {
      gasDeviceStat: {
        totalCount: 0,
        totalOnlineCount: 0
      },
      statisticsTotalGasEvent: {
        todayCount: 0,
        totalCount: 0
      },
      todayGasEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      monthGasEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      gasEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      gasEventStatisticsByDate: {
        todayCount: 0,
        monthCount: 0,
        yearCount: 0
      },
      gasEventThisYearStatistics: {
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      },
      gasTodayStatisticsChart: null,
      gasTodayStatisticsChartOption: {},
      gasEventAnalyseChart: null,
      gasEventAnalyseChartOption: {},
      gasThirtyDaysTrendData: {
        days: [],
        IiList: [],
        totalList: [],
        positionList: [],
        angleList: []
      },
      gasThirtyDaysTrendChart: null,
      gasThirtyDaysTrendChartOption: {},

      quakeDeviceStat: {
        totalCount: 0,
        totalOnlineCount: 0
      },
      statisticsTotalQuakeEvent: {
        todayCount: 0,
        totalCount: 0
      },
      todayQuakeEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      monthQuakeEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      quakeEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      quakeEventStatisticsByDate: {
        todayCount: 0,
        monthCount: 0,
        yearCount: 0
      },
      thisYearQuakeEventStatistics: {
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      },
      quakeTodayStatisticsChart: null,
      quakeTodayStatisticsChartOption: {},
      quakeEventAnalyseChart: null,
      quakeEventAnalyseChartOption: {},
      quakeThirtyDaysTrendData: {
        days: [],
        IiList: [],
        totalList: [],
        positionList: [],
        angleList: []
      },
      quakeThirtyDaysTrendChart: null,
      quakeThirtyDaysTrendChartOption: {},


      beidouDeviceStat: {
        totalCount: 0,
        totalOnlineCount: 0
      },
      statisticsTotalBeidouEvent: {
        todayCount: 0,
        totalCount: 0
      },
      todayBeidouEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      monthBeidouEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      beidouEventStat: {
        angle: 0,
        Ii: 0,
        position: 0
      },
      beidouEventStatisticsByDate: {
        todayCount: 0,
        monthCount: 0,
        yearCount: 0
      },
      thisYearBeidouEventStatistics: {
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      },
      beidouTodayStatisticsChart: null,
      beidouTodayStatisticsChartOption: {},
      beidouEventAnalyseChart: null,
      beidouEventAnalyseChartOption: {},
      beidouThirtyDaysTrendData: {
        days: [],
        IiList: [],
        totalList: [],
        positionList: [],
        angleList: []
      },
      beidouThirtyDaysTrendChart: null,
      beidouThirtyDaysTrendChartOption: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      if(auth.hasPermiOr(['index:gas:tab'])){
        this.initGasCharts()
        this.getGasDeviceStat()
        this.getGasStatisticsTotalEvent()
        this.getGasEventStat()
        this.getGasTodayStatistics()
        this.getGasMonthStatistics()
        this.getGasThirtyDaysEventTrend()
        this.getGasEventThisYearStatistics()
      }
      if(auth.hasPermiOr(['index:quake:tab'])){
        this.initQuakeCharts()
        this.getQuakeDeviceStat()
        this.getQuakeStatisticsTotalEvent()
        this.getQuakeEventStat()
        this.getQuakeTodayStatistics()
        this.getQuakeMonthStatistics()
        this.getQuakeThirtyDaysEventTrend()
        this.getQuakeThisYearEventStatistics()
      }
      if(auth.hasPermiOr(['index:beidou:tab'])){
        this.initBeidouCharts()
        this.getBeidouDeviceStat()
        this.getBeidouStatisticsTotalEvent()
        this.getBeidouEventStat()
        this.getBeidouTodayStatistics()
        this.getBeidouMonthStatistics()
        this.getBeidouThirtyDaysEventTrend()
        this.getBeidouThisYearEventStatistics()
      }
    })
  },
  methods: {
    checkPermi(arr){
      return checkPermi(arr);
    },
    navToGasDevice(){
      this.$router.push({ path: 'gasClient/gasClient' });
    },
    navToGasTodayEvent(){
      let date = new Date();
      let begin = this.parseTime(date, '{y}-{m}-{d}') + ' 00:00:00';
      let end = this.parseTime(date, '{y}-{m}-{d}') + ' 23:59:59';
      this.$router.push({ path: 'gasClient/gasEvent', query: { beginEventTime: begin, endEventTime: end } });
    },
    navToGasAllEvent(){
      this.$router.push({ path: 'gasClient/gasEvent'});
    },
    initGasCharts(){
      this.gasTodayStatisticsChart = echarts.init(this.$refs.gasTodayStatisticsChartDiv);
      this.gasMonthStatisticsChart = echarts.init(this.$refs.gasMonthStatisticsChartDiv);
      this.gasEventAnalyseChart = echarts.init(this.$refs.gasEventAnalyseChartDiv);
      this.gasThirtyDaysTrendChart = echarts.init(this.$refs.gasThirtyDaysTrendChartDiv);
    },
    initGasTodayStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.todayGasEventStat.Ii },
        { name: "位移", value: this.todayGasEventStat.position },
        { name: "倾斜", value: this.todayGasEventStat.angle },
      ]
      _this.gasTodayStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.gasTodayStatisticsChart.setOption(_this.gasTodayStatisticsChartOption)
    },
    initGasMonthStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.monthGasEventStat.Ii },
        { name: "位移", value: this.monthGasEventStat.position },
        { name: "倾斜", value: this.monthGasEventStat.angle },
      ]
      _this.gasMonthStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.gasMonthStatisticsChart.setOption(_this.gasMonthStatisticsChartOption)
    },
    initGasEventChartOption(){
      let _this = this;
      let Ydata = ['震动', '位移', '倾斜'];
      let Xdata = [_this.gasEventStat.Ii, _this.gasEventStat.position, _this.gasEventStat.angle];
      let maxVal = (Math.max.apply(null, Xdata) * 1.2).toFixed(0);
      _this.gasEventAnalyseChartOption = {
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          max: maxVal,
          show: true,
          // 不显示轴线
          axisLine: {
            show: true
          },
          // 不显示刻度线
          axisTick: {
            show: false,
          },
          splitLine: {// 网格线为虚线
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
        },
        yAxis: {
          type: 'category',
          inverse: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
          data: Ydata,
        },
        series: [
          {
            type: "pictorialBar",
            //本地引用
            //     symbol:
            //   "image://" + require("../../../assets/image/home/chartsIcon.png"),
            symbol: "image://",
            symbolSize: [30, 30],
            symbolOffset: [0, 0],
            symbolPosition: "right",
            z: 12,
            itemStyle: {
              normal: {
                color: "#000000"
              }
            },
            data: (function () {
              let list = [];
              for (let i = 0; i < Xdata.length; i++) {
                list.push(2 * Xdata[i]);
              }
              return list;
            })()
          },
          {
            type: 'bar',
            barWidth: 12,
            zlevel: 2,
            barGap: '-100%',
            itemStyle: {
              normal: {
                borderRadius: [0, 6, 6, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(61, 131, 255, 0)'
                  }, {
                    offset: 1, color: 'rgba(72, 240, 255, 1)'
                  }]
                }
              },
            },
            label: {
              show: true,
              position: [550, -25],
              fontSize: 14,
              color: "#000000",
              formatter: function (data) {
                return '{a|' + data.value + '}' + "   次报警"
                //  "{a|" + returnStr + "}"
              },
              rich: {
                a: {
                  color: '#000000',
                  textBorderWidth: 1,
                  fontSize: 22
                }
              },
            },
            data: Xdata,

          },
          {
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: 'rgba(60, 102, 118, 0.34)',
              },
            },
            data: [maxVal, maxVal, maxVal],
            // data: Xdata,
          },

        ],
      };

      _this.gasEventAnalyseChart.setOption(_this.gasEventAnalyseChartOption)
    },
    initThirtyDaysGasEventTrendChartOption(){
      let _this = this;
      _this.gasThirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['震动', '位移','倾斜','总报警数']
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: _this.gasThirtyDaysTrendData.days
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            name: '事件数',
            nameTextStyle: {
              color: '#999999',
            },
            splitLine:{show: false},//去除网格线
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#999999',
            }
          }
        ],
        series: [
          {
            name: '震动',
            type: 'bar',
            color:['#00aeff'],
            data: _this.gasThirtyDaysTrendData.IiList,
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 66, 0, 0, 72, 244],
            markPoint: {
            },
            markLine: {
            },
            // barGap: '-100%',
          },
          {
            name: '位移',
            type: 'bar',
            color:['#ff0000'],
            data: _this.gasThirtyDaysTrendData.positionList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '倾斜',
            type: 'bar',
            color:['#ffd500'],
            data: _this.gasThirtyDaysTrendData.angleList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '总报警数',
            type: 'line',
            color:['#ff00e4'],  //折线条的颜色
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              hadowBlur: 2,
            },
            data:  _this.gasThirtyDaysTrendData.totalList,
          },

        ]
        //你的代码
      };
      _this.gasThirtyDaysTrendChart.setOption(_this.gasThirtyDaysTrendChartOption)
    },
    getGasDeviceStat() {
      gasDeviceStat().then(res => {
        this.gasDeviceStat = res.data
      })
    },
    getGasStatisticsTotalEvent() {
      statisticsTotalGasEvent().then(res => {
        this.statisticsTotalGasEvent = res.data
      })
    },
    getGasEventStat() {
      gasEventStat().then(res => {
        this.gasEventStat.Ii = res.data.Ii
        this.gasEventStat.position = res.data.position
        this.gasEventStat.angle = res.data.angle
        this.initGasEventChartOption()
      })
    },
    getGasTodayStatistics() {
      todayGasEventStat().then(res => {
        this.todayGasEventStat = res.data
        this.initGasTodayStatisticsChartOption()
      })
    },
    getGasMonthStatistics() {
      monthGasEventStat().then(res => {
        this.monthGasEventStat = res.data
        this.initGasMonthStatisticsChartOption()
      })
    },
    getGasThirtyDaysEventTrend() {
      thirtyDaysGasEventTrend().then(res => {
        this.gasThirtyDaysTrendData.days = res.data.days
        this.gasThirtyDaysTrendData.IiList = res.data.IiList
        this.gasThirtyDaysTrendData.positionList = res.data.positionList
        this.gasThirtyDaysTrendData.angleList = res.data.angleList
        this.gasThirtyDaysTrendData.totalList = res.data.totalList
        this.initThirtyDaysGasEventTrendChartOption()
      })
    },
    getGasEventThisYearStatistics(){
      gasEventThisYearStatistics().then(res => {
        this.gasEventThisYearStatistics = res.data
        this.gasEventStatisticsByDate = {
          todayCount: res.data.todayIi + res.data.todayPosition + res.data.todayAngle,
          monthCount: res.data.monthIi + res.data.monthPosition + res.data.monthAngle,
          yearCount: res.data.yearIi + res.data.yearPosition + res.data.yearAngle
        }
      })
    },

    navToQuakeTodayEvent(){
      let date = new Date();
      let begin = this.parseTime(date, '{y}-{m}-{d}') + ' 00:00:00';
      let end = this.parseTime(date, '{y}-{m}-{d}') + ' 23:59:59';
      this.$router.push({ path: 'quakeClient/quakeEvent', query: { beginEventTime: begin, endEventTime: end } });
    },
    navToQuakeAllEvent(){
      this.$router.push({ path: 'quakeClient/quakeEvent'});
    },
    initQuakeCharts(){
      this.quakeTodayStatisticsChart = echarts.init(this.$refs.quakeTodayStatisticsChartDiv);
      this.quakeMonthStatisticsChart = echarts.init(this.$refs.quakeMonthStatisticsChartDiv);
      this.quakeEventAnalyseChart = echarts.init(this.$refs.quakeEventAnalyseChartDiv);
      this.quakeThirtyDaysTrendChart = echarts.init(this.$refs.quakeThirtyDaysTrendChartDiv);
    },
    initQuakeTodayStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.todayQuakeEventStat.Ii },
        { name: "位移", value: this.todayQuakeEventStat.position },
        { name: "倾斜", value: this.todayQuakeEventStat.angle },
      ]
      _this.quakeTodayStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.quakeTodayStatisticsChart.setOption(_this.quakeTodayStatisticsChartOption)
    },
    initQuakeMonthStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.monthQuakeEventStat.Ii },
        { name: "位移", value: this.monthQuakeEventStat.position },
        { name: "倾斜", value: this.monthQuakeEventStat.angle },
      ]
      _this.quakeMonthStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.quakeMonthStatisticsChart.setOption(_this.quakeMonthStatisticsChartOption)
    },
    initQuakeEventChartOption(){
      let _this = this;
      let Ydata = ['震动', '位移', '倾斜'];
      let Xdata = [_this.quakeEventStat.Ii, _this.quakeEventStat.position, _this.quakeEventStat.angle];
      let maxVal = (Math.max.apply(null, Xdata) * 1.2).toFixed(0);
      _this.quakeEventAnalyseChartOption = {
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          max: maxVal,
          show: true,
          // 不显示轴线
          axisLine: {
            show: true
          },
          // 不显示刻度线
          axisTick: {
            show: false,
          },
          splitLine: {// 网格线为虚线
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
        },
        yAxis: {
          type: 'category',
          inverse: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
          data: Ydata,
        },
        series: [
          {
            type: "pictorialBar",
            //本地引用
            //     symbol:
            //   "image://" + require("../../../assets/image/home/chartsIcon.png"),
            symbol: "image://",
            symbolSize: [30, 30],
            symbolOffset: [0, 0],
            symbolPosition: "right",
            z: 12,
            itemStyle: {
              normal: {
                color: "#000000"
              }
            },
            data: (function () {
              let list = [];
              for (let i = 0; i < Xdata.length; i++) {
                list.push(2 * Xdata[i]);
              }
              return list;
            })()
          },
          {
            type: 'bar',
            barWidth: 12,
            zlevel: 2,
            barGap: '-100%',
            itemStyle: {
              normal: {
                borderRadius: [0, 6, 6, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(61, 131, 255, 0)'
                  }, {
                    offset: 1, color: 'rgba(72, 240, 255, 1)'
                  }]
                }
              },
            },
            label: {
              show: true,
              position: [550, -25],
              fontSize: 14,
              color: "#000000",
              formatter: function (data) {
                return '{a|' + data.value + '}' + "   次报警"
                //  "{a|" + returnStr + "}"
              },
              rich: {
                a: {
                  color: '#000000',
                  textBorderWidth: 1,
                  fontSize: 22
                }
              },
            },
            data: Xdata,

          },
          {
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: 'rgba(60, 102, 118, 0.34)',
              },
            },
            data: [maxVal, maxVal, maxVal],
            // data: Xdata,
          },

        ],
      };

      _this.quakeEventAnalyseChart.setOption(_this.quakeEventAnalyseChartOption)
    },
    initThirtyDaysQuakeEventTrendChartOption(){
      let _this = this;
      _this.quakeThirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['震动', '位移','倾斜','总报警数']
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: _this.quakeThirtyDaysTrendData.days
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            name: '事件数',
            nameTextStyle: {
              color: '#999999',
            },
            splitLine:{show: false},//去除网格线
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#999999',
            }
          }
        ],
        series: [
          {
            name: '震动',
            type: 'bar',
            color:['#00aeff'],
            data: _this.quakeThirtyDaysTrendData.IiList,
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 66, 0, 0, 72, 244],
            markPoint: {
            },
            markLine: {
            },
            // barGap: '-100%',
          },
          {
            name: '位移',
            type: 'bar',
            color:['#ff0000'],
            data: _this.quakeThirtyDaysTrendData.positionList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '倾斜',
            type: 'bar',
            color:['#ff8c00'],
            data: _this.quakeThirtyDaysTrendData.angleList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '总报警数',
            type: 'line',
            color:['#f600ff'],  //折线条的颜色
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              hadowBlur: 2,
            },
            data:  _this.quakeThirtyDaysTrendData.totalList,
          },

        ]
        //你的代码
      };
      _this.quakeThirtyDaysTrendChart.setOption(_this.quakeThirtyDaysTrendChartOption)
    },
    getQuakeDeviceStat() {
      quakeDeviceStat().then(res => {
        this.quakeDeviceStat = res.data
      })
    },
    getQuakeStatisticsTotalEvent() {
      statisticsTotalQuakeEvent().then(res => {
        this.statisticsTotalQuakeEvent = res.data
      })
    },
    getQuakeEventStat() {
      quakeEventStat().then(res => {
        this.quakeEventStat.Ii = res.data.Ii
        this.quakeEventStat.position = res.data.position
        this.quakeEventStat.angle = res.data.angle
        this.initQuakeEventChartOption()
      })
    },
    getQuakeTodayStatistics() {
      todayQuakeEventStat().then(res => {
        this.todayQuakeEventStat = res.data
        this.initQuakeTodayStatisticsChartOption()
      })
    },
    getQuakeMonthStatistics() {
      monthQuakeEventStat().then(res => {
        this.monthQuakeEventStat = res.data
        this.initQuakeMonthStatisticsChartOption()
      })
    },
    getQuakeThirtyDaysEventTrend() {
      thirtyDaysQuakeEventTrend().then(res => {
        this.quakeThirtyDaysTrendData.days = res.data.days
        this.quakeThirtyDaysTrendData.IiList = res.data.IiList
        this.quakeThirtyDaysTrendData.positionList = res.data.positionList
        this.quakeThirtyDaysTrendData.angleList = res.data.angleList
        this.quakeThirtyDaysTrendData.totalList = res.data.totalList
        this.initThirtyDaysQuakeEventTrendChartOption()
      })
    },
    getQuakeThisYearEventStatistics(){
      thisYearQuakeEventStatistics().then(res => {
        this.thisYearQuakeEventStatistics = res.data
        this.quakeEventStatisticsByDate = {
          todayCount: res.data.todayIi + res.data.todayPosition + res.data.todayAngle,
          monthCount: res.data.monthIi + res.data.monthPosition + res.data.monthAngle,
          yearCount: res.data.yearIi + res.data.yearPosition + res.data.yearAngle
        }
      })
    },




    navToBeidouAllDevice(){
      this.$router.push({ path: 'beidou/beidouClient' });
    },
    navToBeidouTodayEvent(){
      let date = new Date();
      let begin = this.parseTime(date, '{y}-{m}-{d}') + ' 00:00:00'
      
      let end = this.parseTime(date, '{y}-{m}-{d}') + ' 23:59:59';
      this.$router.push({ path: '/beidou/beidouEvent', query: { beginEventTime: begin, endEventTime: end } });
    },
    navToBeidouAllEvent(){
      this.$router.push({ path: '/beidou/beidouEvent'});
    },
    initBeidouCharts(){
      this.beidouTodayStatisticsChart = echarts.init(this.$refs.beidouTodayStatisticsChartDiv);
      this.beidouMonthStatisticsChart = echarts.init(this.$refs.beidouMonthStatisticsChartDiv);
      this.beidouEventAnalyseChart = echarts.init(this.$refs.beidouEventAnalyseChartDiv);
      this.beidouThirtyDaysTrendChart = echarts.init(this.$refs.beidouThirtyDaysTrendChartDiv);
    },
    initBeidouTodayStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.todayBeidouEventStat.Ii },
        { name: "位移", value: this.todayBeidouEventStat.position },
        { name: "倾斜", value: this.todayBeidouEventStat.angle },
      ]
      _this.beidouTodayStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.beidouTodayStatisticsChart.setOption(_this.beidouTodayStatisticsChartOption)
    },
    initBeidouMonthStatisticsChartOption(){
      let _this = this;
      let datas = [
        { name: "震动", value: this.monthBeidouEventStat.Ii },
        { name: "位移", value: this.monthBeidouEventStat.position },
        { name: "倾斜", value: this.monthBeidouEventStat.angle },
      ]
      _this.beidouMonthStatisticsChartOption = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#00aeff', '#ffd500', '#ff0000'],
        legend: {
          itemWidth: 11,// 标志图形的长度
          itemHeight: 11,// 标志图形的宽度
          // orient: 'vertical',
          // left: 'right',
          bottom: '5%',
          x: '30%',
          data: datas,
          textStyle: { //图例文字的样式
            color: '#000',
            fontSize: 10
          },
        },
        series: {
          name: '报警类型',
          type: 'pie',
          radius: '65%',
          center: ['50%', '40%'],
          animationDuration: 2500,
          data: datas,
          label: {
            normal: {
              position: 'inner',
              show : false
            }
          }
        }
      };
      _this.beidouMonthStatisticsChart.setOption(_this.beidouMonthStatisticsChartOption)
    },
    initBeidouEventChartOption(){
      let _this = this;
      let Ydata = ['震动', '位移', '倾斜'];
      let Xdata = [_this.beidouEventStat.Ii, _this.beidouEventStat.position, _this.beidouEventStat.angle];
      let maxVal = (Math.max.apply(null, Xdata) * 1.2).toFixed(0);
      _this.beidouEventAnalyseChartOption = {
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          max: maxVal,
          show: true,
          // 不显示轴线
          axisLine: {
            show: true
          },
          // 不显示刻度线
          axisTick: {
            show: false,
          },
          splitLine: {// 网格线为虚线
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
        },
        yAxis: {
          type: 'category',
          inverse: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            interval: 0,
            color: 'rgba(0, 0, 0, 1)',
            fontSize: 14
          },
          data: Ydata,
        },
        series: [
          {
            type: "pictorialBar",
            //本地引用
            //     symbol:
            //   "image://" + require("../../../assets/image/home/chartsIcon.png"),
            symbol: "image://",
            symbolSize: [30, 30],
            symbolOffset: [0, 0],
            symbolPosition: "right",
            z: 12,
            itemStyle: {
              normal: {
                color: "#000000"
              }
            },
            data: (function () {
              let list = [];
              for (let i = 0; i < Xdata.length; i++) {
                list.push(2 * Xdata[i]);
              }
              return list;
            })()
          },
          {
            type: 'bar',
            barWidth: 12,
            zlevel: 2,
            barGap: '-100%',
            itemStyle: {
              normal: {
                borderRadius: [0, 6, 6, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(61, 131, 255, 0)'
                  }, {
                    offset: 1, color: 'rgba(72, 240, 255, 1)'
                  }]
                }
              },
            },
            label: {
              show: true,
              position: [550, -25],
              fontSize: 14,
              color: "#000000",
              formatter: function (data) {
                return '{a|' + data.value + '}' + "   次报警"
                //  "{a|" + returnStr + "}"
              },
              rich: {
                a: {
                  color: '#000000',
                  textBorderWidth: 1,
                  fontSize: 22
                }
              },
            },
            data: Xdata,

          },
          {
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: 'rgba(60, 102, 118, 0.34)',
              },
            },
            data: [maxVal, maxVal, maxVal],
            // data: Xdata,
          },

        ],
      };

      _this.beidouEventAnalyseChart.setOption(_this.beidouEventAnalyseChartOption)
    },
    initThirtyDaysBeidouEventTrendChartOption(){
      let _this = this;
      _this.beidouThirtyDaysTrendChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['震动', '位移','倾斜','总报警数']
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: _this.beidouThirtyDaysTrendData.days
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            name: '事件数',
            nameTextStyle: {
              color: '#999999',
            },
            splitLine:{show: false},//去除网格线
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              margin: 2,
              interval: 10,
              color: '#999999',
            }
          }
        ],
        series: [
          {
            name: '震动',
            type: 'bar',
            color:['#00aeff'],
            data: _this.beidouThirtyDaysTrendData.IiList,
            // data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 66, 0, 0, 72, 244],
            markPoint: {
            },
            markLine: {
            },
            // barGap: '-100%',
          },
          {
            name: '位移',
            type: 'bar',
            color:['#ff0000'],
            data: _this.beidouThirtyDaysTrendData.positionList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '倾斜',
            type: 'bar',
            color:['#ff8c00'],
            data: _this.beidouThirtyDaysTrendData.angleList,
            markPoint: {
              data: [
                //图钉
                // { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
              ]
            },
            markLine: {
            }
          },
          {
            name: '总报警数',
            type: 'line',
            color:['#d800ff'],  //折线条的颜色
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              hadowBlur: 2,
            },
            data:  _this.beidouThirtyDaysTrendData.totalList,
          },

        ]
        //你的代码
      };
      _this.beidouThirtyDaysTrendChart.setOption(_this.beidouThirtyDaysTrendChartOption)
    },
    getBeidouDeviceStat() {
      beidouDeviceStat().then(res => {
        this.beidouDeviceStat = res.data
      })
    },
    getBeidouStatisticsTotalEvent() {
      beidouTotalEvent().then(res => {
        this.statisticsTotalBeidouEvent = {
          todayCount: res.data.todayCount ? res.data.todayCount : 0,
          totalCount: res.data.totalCount ? res.data.totalCount : 0
        }
      })
    },
    getBeidouEventStat() {
      beidouEventStat().then(res => {
        this.beidouEventStat.Ii = res.data.Ii
        this.beidouEventStat.position = res.data.position
        this.beidouEventStat.angle = res.data.angle
        this.initBeidouEventChartOption()
      })
    },
    getBeidouTodayStatistics() {
      beidouTodayEventStat().then(res => {
        this.todayBeidouEventStat = res.data
        this.initBeidouTodayStatisticsChartOption()
      })
    },
    getBeidouMonthStatistics() {
      beidouMonthEventStat().then(res => {
        this.monthBeidouEventStat = res.data
        this.initBeidouMonthStatisticsChartOption()
      })
    },
    getBeidouThirtyDaysEventTrend() {
      beidouThirtyDaysEventTrend().then(res => {
        this.beidouThirtyDaysTrendData.days = res.data.days
        this.beidouThirtyDaysTrendData.IiList = res.data.IiList
        this.beidouThirtyDaysTrendData.positionList = res.data.positionList
        this.beidouThirtyDaysTrendData.angleList = res.data.angleList
        this.beidouThirtyDaysTrendData.totalList = res.data.totalList
        this.initThirtyDaysBeidouEventTrendChartOption()
      })
    },
    getBeidouThisYearEventStatistics(){
      beidouThisYearEventStatistics().then(res => {
        this.thisYearBeidouEventStatistics = res.data
        this.beidouEventStatisticsByDate = {
          todayCount: res.data.todayIi + res.data.todayPosition + res.data.todayAngle,
          monthCount: res.data.monthIi + res.data.monthPosition + res.data.monthAngle,
          yearCount: res.data.yearIi + res.data.yearPosition + res.data.yearAngle
        }
      })
    },
    navToVisual(path){
      this.$router.push({ path: path });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.panel-group {
  margin-top: 18px;

  .card-panel-col{
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-xunjian {
        background: #36a3f7;
      }
      .icon-bug {
        background: #f4516c;
      }
      .icon-dashboard {
        background: #34bfa3
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-xunjian {
      color: #36a3f7;
    }
    .icon-bug {
      color: #f4516c;
    }
    .icon-dashboard {
      color: #34bfa3
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
</style>

